<template>
    <myMoveBox ref="myMoveBoxDom" :attr="curAttr" @hide="box_HideEvent">
        <template #show>
            <img class="icon-move" style="width: 30px;height: 30px;" src="@/static/icon/select.svg" />
        </template>
        <template #hide>
            <div class="content">
                <div class="input">
                    <input type="text" v-model="inputText" @input="text_InputEvent">
                    <div @click="select_ClickEvent">SELECT</div>
                </div>
                <div class="select">
                    <div class="title" v-if="tagList.length != 0">检索区</div>
                    <div class="items">
                        <TransitionGroup :css="false" @leave="item_LeaveEvent">
                            <div v-for="(item, index) in tagList" :key="index" :index="index + 1"
                                class="tag-item b tag-item-show">
                                <span>{{ item.name }}</span>
                                <div @click="delTag_ClickEvent(item.name)"></div>
                            </div>
                        </TransitionGroup>
                    </div>
                </div>
                <div class="indexof">
                    <div class="title" v-if="tagSelectList.length != 0">选择区</div>
                    <div class="items">
                        <TransitionGroup :css="false" @enter="item_EnterEvent">
                            <div v-for="(item, index) in tagSelectList" :key="index" :index="index + 1"
                                class="tag-item b" @click="indexofTag_ClickEvent(item)">
                                <span>{{ item.name }}</span>
                            </div>
                        </TransitionGroup>
                    </div>
                </div>
            </div>
        </template>
    </myMoveBox>
</template>

<script setup>
import myMoveBox from '@/components/moveBox-v2/index-morph.vue'
import { getTagList_API } from '@/axios/api/tag.js'
import { onMounted } from 'vue';
import { useFileStores } from '@/stores/index.js'
import gsap from 'gsap'

const fileStores = useFileStores();

const curAttr = {
    posiIndex: [0, 1],//起始下标
    whCount: [1, 1],//宽高长度
    zIndex: [999, 9999],//图层
    backcolor: ['#409eff', 'white'],//背景颜色
    isClick: true,//默认点击
};


const inputText = ref('');
const tagList = ref([]);//检索区的 [0:模查,1:club,2:tag]
const tagSelectList = ref([]);//选择区的
const tagAllList = ref({});//全部的
let drawIndex = 0;//带选择区的从渲染下标


const emits = defineEmits(['change']);



onMounted(() => {
    loadTagList();
    const data = fileStores.getSelectTag('novel');
    tagList.value = data.tag;
})

const box_HideEvent = () => {
    inputText.value = '';
    tagSelectList.value = [];
}

const select_ClickEvent = () => {
    emits('change', {
        tag: tagList.value,
    });
}

const text_InputEvent = () => {
    const text = inputText.value;
    tagSelectList.value = [];
    drawIndex = 0;
    if (!text) return;

    const ifr = text.substring(0, 1);
    const cur = text.substring(1, text.length).toLowerCase();
    if (ifr == '#') {
        //查询指定的特征Tag
        const list = tagAllList.value['traits'];
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            if (element.title.toLowerCase().indexOf(cur) != -1) {
                tagSelectList.value.push({
                    type: 2,
                    name: element.title,
                    id: element.id,
                });
            }
        }
    } else {
        tagSelectList.value.push({
            type: 0,
            name: text,
        });
    }
}

//#region tag操作
const delTag_ClickEvent = (name) => {
    tagList.value = tagList.value.filter(u => u.name != name);
}
const indexofTag_ClickEvent = (data) => {
    drawIndex = 0;
    if (!tagList.value.find(u => u.name == data.name)) {
        tagList.value.push(data);
    }
    if (data.type == 0) {
        inputText.value = '';
        tagSelectList.value = [];
    }
}
//#endregion



//#region 动画
const item_EnterEvent = (el, done) => {
    gsap.to(el, {
        delay: 0.03 * drawIndex,
        padding: '2 10',
        duration: 0.3,
        opacity: 1,
        onComplete: done,
    });
    drawIndex++;
}
const item_LeaveEvent = (el, done) => {
    gsap.to(el, {
        delay: 0.03,
        marginLeft: 10,
        duration: 0.3,
        opacity: 0,
        onComplete: done,
    });
}
//#endregion


const loadTagList = () => {
    getTagList_API({
        type: 2,
    }).then(res => {
        tagAllList.value = res.result;
    })
}

</script>

<style lang="scss" scoped>
.header {
    width: 50px;
    height: 50px;
    cursor: pointer;
    user-select: none;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;

    >img {
        width: 30px;
        height: 30px;
    }
}

.content {
    width: 500px;
    background: white;
    padding: 10px;
    box-shadow: 0 0 10px -5px #3572EF;
    border-radius: 7px;
    margin-top: 5px;
    user-select: none;
    // back

    .switch-item {
        display: flex;
        align-items: center;
        margin-top: 5px;

        >span {
            width: 235px;
            font-weight: 900;
            color: rgb(66, 66, 66);
            font-size: 18px;
        }

        >div {
            width: 100px;
        }
    }

    .items {
        display: flex;
        flex-wrap: wrap;
        max-height: 300px;
        overflow-y: auto;
        cursor: pointer;

        .tag-item {
            // padding: 2px 10px;
            border-radius: 5px;
            margin: 0 5px 5px 0;
            color: white;
            display: flex;
            font-size: 18px;
            align-items: center;
            overflow: hidden;
            opacity: 0;

            >div {
                width: 20px;
                height: 20px;
                background-image: url('@/static/icon/close-w.svg');
                background-size: cover;
                background-position: center;
                margin-left: 6px;
            }
        }

        .tag-item-show {
            padding: 2px 10px;
            opacity: 1;
        }
    }

    .title {
        margin: 5px 0;
        color: rgb(66, 66, 66);
        font-weight: 900;
        font-size: 18px;
    }

    .input {
        display: flex;

        >input {
            width: 60%;
            outline: none;
            border: 1px solid #3ABEF9;
            border-radius: 7px;
            font-size: 16px;
            background: none;
            box-shadow: 0 0 10px -5px #3572EF;
            padding: 5px 15px;
            color: rgb(66, 66, 66);
        }

        >div {
            // border: 1px solid #3ABEF9;
            margin-left: 30px;
            font-weight: 900;
            padding: 5px 15px;
            border-radius: 7px;
            cursor: pointer;
            background: #409eff;
            color: white;
            transition-duration: 0.3s;
        }

        >div:hover {
            box-shadow: 0 0 10px -3px #3572EF;
        }

        >div:active {
            // background-color: #3572EF;
            background: #3572EF;
            box-shadow: 0 0 10px -3px #050C9c;
        }

    }
}
</style>
